<template>
  <div>
    <group label-width="4em" label-margin-right="1em" label-align="left">
      <x-input title="姓名" name="username" placeholder="请输入姓名" is-type="china-name"></x-input>
      <x-input title="手机号码" name="mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile"></x-input>
      <x-input title="邮箱" name="email" placeholder="请输入邮箱地址" is-type="email"></x-input>
    </group>

  </div>
</template>

<script>
import { XInput, Group, XButton, Cell } from "vux";

export default {
  components: {
    XInput,
    XButton,
    Group,
    Cell
  },
  data() {
    return {
      password: "123465",
      password2: "",
      enterText: "",
      valid1: false,
      valid2: false,
      iconType: "",
      be2333: function(value) {
        return {
          valid: value === "2333",
          msg: "Must be 2333"
        };
      },
      style: "",
      disabledValue: "hello",
      debounceValue: "",
      maxValue: "",
      maskValue: "13545678910",
      maskValue2: ""
    };
  },
  methods: {
    getValid1() {
      this.valid1 = this.$refs.input01.valid;
    },
    getValid2() {
      this.valid2 = this.$refs.input02.valid;
    },
    change(val) {
      console.log("on change", val);
    },
    onBlur(val) {
      console.log("on blur", val);
    },
    onFocus(val, $event) {
      console.log("on focus", val, $event);
    },
    onEnter(val) {
      console.log("click enter!", val);
    }
  }
};
</script>
<style scoped>
.red {
  color: red;
}
.green {
  color: green;
}
</style>
